import React, { memo } from 'react'
import { Form, Input, Button } from 'antd'
import { UserOutlined, LockOutlined ,WhatsAppOutlined } from '@ant-design/icons'
import { message } from 'antd';
import {useHistory} from 'react-router-dom'

import {register} from '@/api/user'
export default memo(function Login() {
  const history = useHistory()

  const onFinish = async (values) => {
    let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    if(!reg_tel.test(values.telephone)){
      message.error('请输入正确的手机号码！')
      return
    }
    if(values.passWord !== values.confirmPassword){
      message.error('两次输入的密码不一致！')
      return
    }
    console.log('====================================');
    console.log(values);
    console.log('====================================');
    const res = await register(values)
    console.log(res.data);
    switch (res.data.code) {
      case 204:
        message.warn('该手机号已注册！');
        break;
      case 200:
        message.success("注册成功！");
        history.replace("/login") // 跳转到登录界面
        break;
      default:
        message.warn('注册失败，请仔细检查账号和密码');
        break;
    }
  }

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }

   const goLogin=()=>{
    history.replace('/')
  }
  return (
    <div className="bg-login bg-cover w-full h-screen bg-gray-300 relative">
      <div className="flex flex-col justify-center items-center absolute z-1 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1/2 h-3/4 bg-gray-700">
        <div className="h-20 text-4xl font-bold text-white">Uooki</div>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 24 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label=""
            name="nickName"
            rules={[{ required: true, message: '请输入昵称!' }]}
          >
            <Input
              className="rounded-full w-80 h-10 "
              placeholder="昵称"
              prefix={<UserOutlined className="site-form-item-icon" />}
            />
          </Form.Item>
          <Form.Item
            label=""
            name="telephone"
            rules={[{ required: true, message: '请输入手机号!' }]}
          >
            <Input
              className="rounded-full w-80 h-10 "
              placeholder="手机号"
              prefix={<WhatsAppOutlined className="site-form-item-icon" />}
            />
          </Form.Item>
          <Form.Item
            label=""
            name="passWord"
            rules={[{ required: true, message: '请输入密码!' },{ len: '6' , message: '密码长度至少6位!'}]}
          >
            <Input.Password
              className="rounded-full  w-80 h-10"
              placeholder="密码"
              prefix={<LockOutlined className="site-form-item-icon" />}
            />
          </Form.Item>
          <Form.Item
            label=""
            name="confirmPassword"
            rules={[{ required: true, message: '请确认密码!' }]}
          >
            <Input.Password
              className="rounded-full  w-80 h-10"
              placeholder="确认密码"
              prefix={<LockOutlined className="site-form-item-icon" />}
            />
          </Form.Item>
          <Form.Item wrapperCol={{ span: 16 }}>
            <Button
              type="primary"
              htmlType="submit"
              className="rounded-full w-80 h-10"
            >
              注册
            </Button>
          </Form.Item>
          <Form.Item wrapperCol={{ span: 16 }}>
            <Button
              type="primary"
              onClick={goLogin}
              className="rounded-full w-80 h-10"
            >
              去登录
            </Button>
          </Form.Item>
          {/* <div className="w-80 h-10 flex justify-between text-white">
            <Form.Item
              wrapperCol={{ span: 13 }}
              labelCol={{ span: 14 }}
              label="记住密码"
              name="remember"
              valuePropName="checked"
              className='rememberPassword'
            >
              <Switch/>
            </Form.Item>
            <div>忘记密码</div>
          </div> */}
        </Form>

        {/* <div className="w-80 h-5 flex justify-between text-white">
          <div>创建账号</div>
          <div>其他帮助</div>
        </div> */}
      </div>
    </div>
  )
})
